<script setup>
import 'animate.css';
import { animate, createTimeline  } from 'animejs';
import MyTransition from "@components/transitions/MyTransition.vue";
import ElementTransition from "@components/transitions/ElementTransition.vue";
import MyTransitionGroup from "@components/transitions/MyTransitionGroup.vue";
import SearchTransitionGroup from "@components/transitions/SearchTransitionGroup.vue";

const show = ref(true);
const bounceShow = ref(true);
const nestedShow = ref(true);

// 在元素被插入到 DOM 之前被调用
// 用这个来设置元素的 "enter-from" 状态
const onBeforeEnter = (el) => {
  console.log('before-enter');
};

//在元素被插入到 DOM 之后的下一帧被调用
// 用这个来开始进入动画
const onEnter = (el, done) => {
  console.log('enter');
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  done();
};
// 当进入过渡完成时调用。
const onAfterEnter = (el) => {
  console.log('after-enter');
};
// 当进入过渡在完成之前被取消时调用
const onEnterCancelled = (el) => {
  console.log('enter-cancelled');
};
// 在 leave 钩子之前调用
// 大多数时候，你应该只会用到 leave 钩子
const onBeforeLeave = (el) => {
  console.log('before-leave');
};
// 在离开过渡开始时调用
// 用这个来开始离开动画
const onLeave = (el, done) => {
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  console.log('leave');
  done();
};
// 在离开过渡完成、
// 且元素已从 DOM 中移除时调用
const onAfterLeave = (el) => {
  console.log('after-leave');
};
// 仅在 v-show 过渡中可用
const onLeaveCancelled = (el) => {
  console.log('leave-cancelled');
};


onMounted(async () => {
  await nextTick();
  const tl = createTimeline({ defaults: { duration: 750 } });
  
  tl.label('start')
  .add('.square', { x: '15rem' }, 500)
  .add('.circle', { x: '15rem' }, 'start')
  .add('.triangle', { x: '15rem', rotate: '1turn' }, '<-=500');
});


const count = ref(0);
setInterval(() => {
  count.value++;
}, 1000);
</script >

<template >
  <div>
    <div>Transition</div>
    <div class="container">
      <div>
        <AButton @click="show = !show">Toggle</AButton>
        <Transition name="slide-fade">
          <p v-show="show"> hello world! </p>
        </Transition>
      </div>
      
      <div>
        <AButton @click="bounceShow = !bounceShow">Toggle</AButton>
        <Transition name="bounce">
          <p v-show="bounceShow" class="text-center"> Hello here is some bouncy text! </p>
        </Transition>
      </div>
      
      <div style="overflow: hidden">
        <!-- 假设你已经在页面中引入了 Animate.css -->
        <Transition
            name="custom-classes"
            enter-active-class="animate__animated animate__backInDown"
            leave-active-class="animate__animated animate__bounceOutRight"
        >
          <p v-show="show" class="text-center">hello</p>
        </Transition>
      </div>
      
      <div>
        <AButton @click="nestedShow = !nestedShow">Toggle</AButton>
        <Transition name="nested" :duration="{ enter : 500, leave: 800}"
            @before-enter="onBeforeEnter"
            @enter="onEnter"
            @after-enter="onAfterEnter"
            @enter-cancelled="onEnterCancelled"
            @before-leave="onBeforeLeave"
            @leave="onLeave"
            @after-leave="onAfterLeave"
            @leave-cancelled="onLeaveCancelled">
          <div v-if="nestedShow" class="outer">
            <div class="inner">
              Hello
            </div>
          </div>
        </Transition>
      </div>
      
      <div>
        <div class="large row">
          <div class="medium pyramid">
            <div class="triangle">triangle</div>
            <div class="square">square</div>
            <div class="circle">circle</div>
          </div>
        </div>
      </div>
      
      <div>
        <MyTransition></MyTransition>
      </div>
      
      <div>
        <ElementTransition></ElementTransition>
      </div>
      
      <div>
        <div class="wrapper">
          <Transition>
            <span :key="count">{{ count }}</span>
          </Transition>
        </div>
      </div>
      
    </div>
  
    <div>
      <MyTransitionGroup></MyTransitionGroup>
    </div>
    
    <div>
      <SearchTransitionGroup></SearchTransitionGroup>
    </div>
  </div>
</template >

<style scoped >
.container {
  border: 1px solid #6A00F5;
  padding: 10px;
}
/* 下面我们会解释这些 class 是做什么的 */
/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}


.text-center {
  text-align: center;
}
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

/* 应用于嵌套元素的规则 */
.nested-enter-active .inner {
  transition-delay: 0.25s;
}
.nested-leave-active .inner {
  transition: all 0.3s ease-in-out;
}

.nested-enter-from .inner,
.nested-leave-to .inner {
  transform: translateX(30px);
  opacity: 0;
}

span{
  font-size: 4rem;
}
.wrapper{
  position:relative;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
  position: absolute;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style >